<template>
  <view class="login-popup" id="popupApp" v-if="popupApp">
    <view class="login_container relative" style="background-color: #FFFFFF;padding:50rpx 44rpx 30rpx;border-radius: 20rpx;">
      <view class="content-item">
        <view v-if="isLogin === 'login'">
          <view class="text-000 fs34 bold tac">欢迎使用懂鲜 APP</view>
          <view class="fs28 text-000 mt40 tac">登陆账号，可享受更多服务</view>
        </view>
        <view v-else-if="isLogin === 'mobile'">
          <view class="text-000 fs34 bold tac">请绑定手机号</view>
          <view class="fs28 text-000 mt40 tac">绑定手机号，可享受更多服务</view>
        </view>
        <view v-else>
          <slot></slot>
        </view>
      </view>
      <view class="footer1 flex" style="display: flex;align-items: center;justify-content: center;margin-top: 60rpx;">
        <u-button
          style="width: 240rpx;height: 80rpx;
              line-height: 80rpx;
              color: #666;
              border-radius: 80rpx;
              border: 1px solid #d9d9d9;
              background-color: #d9d9d9;
              margin-right: 30rpx;"
          text="取消"
          @click="cancelLogin"
          shape="circle"
        ></u-button>
        <u-button
          @click="wechatLogin"
          style="width: 240rpx;
            height: 80rpx;
            line-height: 80rpx;"
          text="确定"
          shape="circle"
          color="linear-gradient(to right, #1CD19F, #1FB0AC)"
        ></u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'noLoginToast',
  props: {
    parentIsLogin: {
      type: String,
      default: 'login'
    }
  },
  data() {
    return {
      type_status: 'center',
      isChecked: false,
      isLogin: 'login',
      toastType: 1,
      popupApp: false
    }
  },
  methods: {
    closeLoginPopup() {
      this.popupApp = false
    },
    wechatLogin() {
      this.popupApp = false
      this.closeLoginPopup()
      if (this.isLogin === 'login') {
        uni.navigateTo({
          url: '/personal/otherPhoneLogin/index'
        })
      } else if (this.isLogin === 'mobile') {
        uni.navigateTo({
          url: '/subpages/pages/xgmp'
        })
      }
    },
    cancelLogin() {
      this.closeLoginPopup()
    },
    // 提示获取手机号
    async getPhoneNumber() {
      // #ifdef APP-PLUS || H5
      let mobile = uni.getStorageSync('mobile')
      if (!mobile) {
        this.isLogin = 'mobile'
        this.popupApp = true
        return false
      }
      return true
      // #endif
    },
    // 默认是提示登录
    async open() {
      let that = this
      // #ifdef APP-PLUS || H5
      let token = uni.getStorageSync('token')
      if (!token) {
        that.isLogin = 'login'
        this.popupApp = true
        return false
      }
      return true
      // #endif
    }
  },
}
</script>
<style lang="scss">
.footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f4f4f4;
  margin-top: 30rpx;
  padding-bottom: 20rpx;

  button {
    margin: 0 auto;
    width: 100%;
    background-color: #19be6b;
    // width: 200upx;
    border-radius: 10upx;
    font-size: $uni-font-size-sm;
    // padding: 22upx 34upx;
    height: 80upx;
    font-size: 30rpx;
    line-height: 80upx !important;
    // line-height: 1;
    color: #ffffff;
  }

  button:after {
    border: 0;
  }
}
.login_container {
  width: 600rpx !important;
  margin: 0 auto;
  border-radius: 20rpx;
  // border: 1px solid #f00;
  // background: url("@/static/login/login_bg.png") no-repeat;
  // background-size: cover;
  // background-size: 100% 100%;
  padding-bottom: 60rpx !important;
  .footer1 {
    margin-top: 60rpx;
  }
}
.content-item {
  margin: 0 0 44rpx;
  text-align: center;
  line-height: 42rpx;
  color: #000;
  font-size: 36rpx;
}
.custom-style {
  width: 400rpx;
  height: 80rpx;
  line-height: 80rpx;
  color: #666;
  border-radius: 80rpx;
  border: 1px solid #d9d9d9;
  background-color: #d9d9d9;
  margin-right: 30rpx;
}
.custom-style-login {
  width: 400rpx;
  height: 80rpx;
  line-height: 80rpx;
}
.login-popup {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  background-color: rgba(0, 0, 0, 0.5) !important;
}
.login-popup /deep/ .uni-mask--hook {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
.user_agreement_container /deep/ .private {
  margin-left: 40rpx;
}
.close_icon {
  position: absolute;
  top: 26rpx;
  right: 26rpx;
  z-index: 1;
}
</style>